<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello MUI</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1,maximum-scale=1,   user-scalable=no"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <!-- https://github.com/dcloudio/mui/blob/master/examples/hello-mui/examples/tabbar.html -->

    <!--App自定义的css-->
    <!-- <link rel="stylesheet" type="text/css" href="../css/app.css"/> -->

    <!--标准mui.css-->
    <!-- 第一步引入mui css -->
    <link rel="stylesheet" href="./assets/mui/css/mui.min.css" />
    <link rel="stylesheet" href="./assets/mui/css/icons-extra.css">
    <link rel="stylesheet" href="./assets/mui/fonts/mui-icons-extra.ttf">

    <link rel="stylesheet" href="./common.css" />


    <link rel="stylesheet" href="./css/index.css">

    <style></style>
  </head>

  <body>
    <header class="mui-bar mui-bar-nav">
      <a class="mui-action-search mui-icon mui-icon-search mui-pull-right"></a>
      <h1 class="mui-title">乐淘云购jiely</h1>
    </header>
    <nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="index.html">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="category.html">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">分类</span>
			</a>
			<a class="mui-tab-item" href="cart.html">
				<span class="mui-icon mui-icon-extra mui-icon-extra-cart"> <span class="mui-badge">9</span></span>
				<span class="mui-tab-label">购物车</span>
			</a>
			<a class="mui-tab-item" href="user.html">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
    <div class="mui-content">
      <!-- banner start   轮播图开始-->
      <div class="mui-slider">
        <div class="mui-slider-group mui-slider-loop">
          <!--支持循环，需要重复图片节点-->
          <div class="mui-slider-item mui-slider-item-duplicate">
            <a href="#"><img src="./images/banner4.png" /></a>
          </div>
          <div class="mui-slider-item">
            <a href="#"><img src="./images/banner1.png" /></a>
          </div>
          <div class="mui-slider-item">
            <a href="#"><img src="./images/banner2.png" /></a>
          </div>
          <div class="mui-slider-item">
            <a href="#"><img src="./images/banner3.png" /></a>
          </div>
          <div class="mui-slider-item">
            <a href="#"><img src="./images/banner4.png" /></a>
          </div>
          <!--支持循环，需要重复图片节点-->
          <div class="mui-slider-item mui-slider-item-duplicate">
            <a href="#"><img src="./images/banner1.png" /></a>
          </div>
        </div>

        <!--  轮播图小圆点添加   mui-active  高亮  -->
        <div class="mui-slider-indicator indicator">
          <div class="mui-indicator mui-active"></div>
          <div class="mui-indicator"></div>
          <div class="mui-indicator"></div>
          <div class="mui-indicator"></div>
        </div>
      </div>
      <!-- / banner end   轮播图结束-->
      


     



        <div class="nav">
          <ul class="mui-clearfix">
            <li><a href="#"><img src="./images/nav1.png" alt=""></a></li>
            <li><a href="#"><img src="./images/nav2.png" alt=""></a></li>
            <li><a href="#"><img src="./images/nav3.png" alt=""></a></li>
            <li><a href="#"><img src="./images/nav4.png" alt=""></a></li>
            <li><a href="#"><img src="./images/nav5.png" alt=""></a></li>
            <li><a href="#"><img src="./images/nav6.png" alt=""></a></li>
          </ul>
        </div>

        <!--  品牌专区 -->
        <div class="adBox1">
          <h2>
            <img src="./images/title0.png" alt="">
        
        </h2>
          <ul class="  ad1  mui-clearfix">
            <li><a href="#"><img src="./images/brand1.png" alt=""></img></a></li>
            <li><a href="#"><img src="./images/brand2.png" alt=""></img></a></li>
            <li><a href="#"><img src="./images/brand3.png" alt=""></img></a></li>
            <li><a href="#"><img src="./images/brand4.png" alt=""></img></a></li>
            <li><a href="#"><img src="./images/brand5.png" alt=""></img></a></li>
            <li><a href="#"><img src="./images/brand6.png" alt=""></img></a></li>
            <li><a href="#"><img src="./images/brand7.png" alt=""></img></a></li>
            <li><a href="#"><img src="./images/brand8.png" alt=""></img></a></li>
          </ul>


        </div>

  
       <!--  广告1 -->
        <div class="adBox2">
          <h2>
            <img src="./images/title2.png" alt="">
        
        </h2>
          <ul class="  mui-clearfix   ad2">
            <li>
              <a href="#">
                
                <img src="./images/product.jpg" alt="" />
               <div class="des">
                 <p> 
                  adidas阿迪达斯 男式 场下休闲篮球鞋S83700
                </p>
                 <span class="oldPrice"> 原价 5888</span>
                 <span class="nowPrice"> 现价 188</span>
                 <button type="button" class="mui-btn mui-btn-primary">立即购买</button>
               </div>
            
            
            
            </a>
          
          
          </li>
          <li>
            <a href="#">
              
              <img src="./images/product.jpg" alt="" />
             <div class="des">
               <p> 
                adidas阿迪达斯 男式 场下休闲篮球鞋S83700
              </p>
               <span class="oldPrice"> 原价 5888</span>
               <span class="nowPrice"> 现价 188</span>
               <button type="button" class="mui-btn mui-btn-primary">立即购买</button>
             </div>
          
          
          
          </a>
        
        
        </li>
        <li>
          <a href="#">
            
            <img src="./images/product.jpg" alt="" />
           <div class="des">
             <p> 
              adidas阿迪达斯 男式 场下休闲篮球鞋S83700
            </p>
             <span class="oldPrice"> 原价 5888</span>
             <span class="nowPrice"> 现价 188</span>
             <button type="button" class="mui-btn mui-btn-primary">立即购买</button>
           </div>
        
        
        
        </a>
      
      
      </li>
      <li>
        <a href="#">
          
          <img src="./images/product.jpg" alt="" />
         <div class="des">
           <p> 
            adidas阿迪达斯 男式 场下休闲篮球鞋S83700
          </p>
           <span class="oldPrice"> 原价 5888</span>
           <span class="nowPrice"> 现价 188</span>
           <button type="button" class="mui-btn mui-btn-primary">立即购买</button>
         </div>
      
      
      
      </a>
    
    
    </li>
           
          </ul>


        </div>
        
       <!--  广告1 -->
       <div class="adBox2">
        <h2>
          <img src="./images/title2.png" alt="">
      
      </h2>
        <ul class="  mui-clearfix   ad2">
          <li>
            <a href="#">
              
              <img src="./images/product.jpg" alt="" />
             <div class="des">
               <p> 
                adidas阿迪达斯 男式 场下休闲篮球鞋S83700
              </p>
               <span class="oldPrice"> 原价 5888</span>
               <span class="nowPrice"> 现价 188</span>
               <button type="button" class="mui-btn mui-btn-primary">立即购买</button>
             </div>
          
          
          
          </a>
        
        
        </li>
        <li>
          <a href="#">
            
            <img src="./images/product.jpg" alt="" />
           <div class="des">
             <p> 
              adidas阿迪达斯 男式 场下休闲篮球鞋S83700
            </p>
             <span class="oldPrice"> 原价 5888</span>
             <span class="nowPrice"> 现价 188</span>
             <button type="button" class="mui-btn mui-btn-primary">立即购买</button>
           </div>
        
        
        
        </a>
      
      
      </li>
      <li>
        <a href="#">
          
          <img src="./images/product.jpg" alt="" />
         <div class="des">
           <p> 
            adidas阿迪达斯 男式 场下休闲篮球鞋S83700
          </p>
           <span class="oldPrice"> 原价 5888</span>
           <span class="nowPrice"> 现价 188</span>
           <button type="button" class="mui-btn mui-btn-primary">立即购买</button>
         </div>
      
      
      
      </a>
    
    
    </li>
    <li>
      <a href="#">
        
        <img src="./images/product.jpg" alt="" />
       <div class="des">
         <p> 
          adidas阿迪达斯 男式 场下休闲篮球鞋S83700
        </p>
         <span class="oldPrice"> 原价 5888</span>
         <span class="nowPrice"> 现价 188</span>
         <button type="button" class="mui-btn mui-btn-primary">立即购买</button>
       </div>
    
    
    
    </a>
  
  
  </li>
         
        </ul>


      </div>
      
       <!--  广告2 -->
       <div class="adBox2">
        <h2>
          <img src="./images/title2.png" alt="">
      
      </h2>
        <ul class="  mui-clearfix   ad2">
          <li>
            <a href="#">
              
              <img src="./images/product.jpg" alt="" />
             <div class="des">
               <p> 
                adidas阿迪达斯 男式 场下休闲篮球鞋S83700
              </p>
               <span class="oldPrice"> 原价 5888</span>
               <span class="nowPrice"> 现价 188</span>
               <button type="button" class="mui-btn mui-btn-primary">立即购买</button>
             </div>
          
          
          
          </a>
        
        
        </li>
        <li>
          <a href="#">
            
            <img src="./images/product.jpg" alt="" />
           <div class="des">
             <p> 
              adidas阿迪达斯 男式 场下休闲篮球鞋S83700
            </p>
             <span class="oldPrice"> 原价 5888</span>
             <span class="nowPrice"> 现价 188</span>
             <button type="button" class="mui-btn mui-btn-primary">立即购买</button>
           </div>
        
        
        
        </a>
      
      
      </li>
      <li>
        <a href="#">
          
          <img src="./images/product.jpg" alt="" />
         <div class="des">
           <p> 
            adidas阿迪达斯 男式 场下休闲篮球鞋S83700
          </p>
           <span class="oldPrice"> 原价 5888</span>
           <span class="nowPrice"> 现价 188</span>
           <button type="button" class="mui-btn mui-btn-primary">立即购买</button>
         </div>
      
      
      
      </a>
    
    
    </li>
    <li>
      <a href="#">
        
        <img src="./images/product.jpg" alt="" />
       <div class="des">
         <p> 
          adidas阿迪达斯 男式 场下休闲篮球鞋S83700
        </p>
         <span class="oldPrice"> 原价 5888</span>
         <span class="nowPrice"> 现价 188</span>
         <button type="button" class="mui-btn mui-btn-primary">立即购买</button>
       </div>
    
    
    
    </a>
  
  
  </li>
         
        </ul>


      </div>





    

    </div>
  </body>
  <!-- <script src="./assets/mui/js/mui.min.js"></script>


  <script src="./common.js"></script> -->
  <script src="./assets/mui/js/mui.min.js"></script>
	
	<!-- 移动端的jq -->
	<script src="./assets/zepto/zepto.min.js"></script>
	<!-- 模块引擎 -->
	<script src="./assets/artTemplate/template-web.js"></script>
	<!-- <script>
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
	</script> -->


	<script src="./common.js"></script>
  <script>
    // mui.init({
    //   swipeBack: true, //启用右滑关闭功能
    // });

    //获得slider插件对象
    var gallery = mui(".mui-slider");
    gallery.slider({
      interval: 1000, //自动轮播周期，若为0则不自动播放，默认为0；
    });
  </script>
</html>
